<template>
  <div>
    <van-tabbar route>
      <van-tabbar-item to="/home">
        <template #icon="props">
          <geek-icon :name='props.active?"home-sel":"home"'></geek-icon>
        </template>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/question">
        <template #icon="props">
           <geek-icon :name='props.active?"qa-sel":"qa"'></geek-icon>
        </template>
        <span>问答</span>
      </van-tabbar-item>
      <van-tabbar-item to="/video">
        <template #icon="props">
          <geek-icon :name='props.active?"video-sel":"video"'></geek-icon>
        </template>
        <span>视频</span>
      </van-tabbar-item>
      <van-tabbar-item to="/user">
        <template #icon="props">
              <geek-icon :name='props.active?"mine-sel":"mine"'></geek-icon>
        </template>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped lang="less">

.myicon {
    font-size: 20px;
}

 /deep/ .van-tabbar {
  background: @geek-gray-color;
  position: static;
}
/deep/ .van-tabbar-item--active {
 color: @geek-color;
 background-color: @geek-gray-color
}
</style>
